<template>
  <div>
    <h1 ref="h1">模板ref使用</h1>
    <p>
      <button @click="getRef">获取ref</button>
    </p>
    <hr />
    <Son ref="son" />
  </div>
</template>

<script>
import { ref } from 'vue'
import Son from './son.vue'
export default {
  components: {
    Son
  },
  setup () {
    /**
     * **实现步骤**
        1. 使用ref函数传入null创建 ref对象 =>  `const 常量名称 = ref(null)`
        2. 模板中通过定义ref属性等于1中创建的ref对象常量名称建立关联  =>  `<h1 ref="常量名称"></h1>`
        3. setup函数中**必须返回**：`return {常量名称}`
        4. 使用 => `常量名称.value`
     */
    const h1 = ref(null)
    const son = ref(null)

    const getRef = () => {
      // console.log(h1)
      // 1. 获取h1的dom对象
      h1.value.style.border = '10px solid red'
      // 2. 获取子组件实例
      console.log(son.value)
      son.value.v2test()
      son.value.v3test()
    }
    return { h1, getRef, son }
  }
}
</script>

<style lang="scss" scoped>
</style>
